<template>
    <div class="carousel">
        <el-carousel :interval="4000" type="card" height="300px">
            <el-carousel-item v-for="item in 6" :key="item">
            <h3 text="2xl" justify="center">{{ item }}</h3>
            </el-carousel-item>
        </el-carousel>
        <div class="hooks">
          <div>name：{{ loading ? 'loading' : data }}</div>
          {{ data }}
        </div>
    </div>
</template>

<script setup lang="ts">
function getUsername(params: { desc: string }): Promise<string> {
    return new Promise(resolve => {
      setTimeout(() => {
        resolve(`vue-hooks-plus ${params.desc}`)
      }, 1000)
    })
  }

const { data, loading } = useRequest(() => getUsername({ desc: 'good' }))
</script>

<style scoped>
.carousel {
    width: 500px;
    height: 300px;
}
.el-carousel__item h3 {
  color: #475669;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
  text-align: center;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
</style>